<template>
	<view class="content">
		<yaohai-cart-ball :end-x="-20" :end-y="691" ref="ballRefs"></yaohai-cart-ball>
		<view class="list">
			<view class="item">
				<image @click="addcart" class="goods" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni.png"></image>
			</view>
		</view>
		<view class="cart">
			<view class="bag"></view>
			购物车
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const ballRefs 	= ref(null)
function addcart() {
	const query = uni.createSelectorQuery()
	query.select('.goods').boundingClientRect((rect) => {
		//第一个参数小球图片地址
		//第二个参数图片小球开始位置离左侧的距离
		//第三个参数图片小球开始位置离顶部的距离
		ballRefs.value.movebell('', rect.left, rect.top)
	}).exec();
	// ballRefs.value.movebell('', 285, 15)
}
</script>

<style>
.list {
	padding: 30rpx;
	display: flex;
	justify-content: flex-end;
}
.goods {
	height: 150rpx;
	width: 150rpx;
}
.cart {
	position: fixed;
	left: 20rpx;
	right: 20rpx;
	bottom: 20rpx;
	background-color: #8f8f94;
	color: #ffffff;
	padding: 20rpx;
	border-radius: 8rpx;
	text-align: center;
}
.bag {
	position: absolute;
	width: 80rpx;
	height: 80rpx;
	top: -20rpx;
	left: 20rpx;
	background-color: black;
}
</style>
